<template>
	<view class="u-p-20">
		<view class="box">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="type">
					<u-input v-model="form.type" type="select" placeholder='*请选择证件类型' @click="select" />
				</u-form-item>
				<u-form-item prop="idno">
					<u-input v-model="form.idno" placeholder='*请输入证件号' />
				</u-form-item>
			</u-form>
			<view class="u-p-t-20 u-tips-color">
				*输入的证件号须与物业公司登记证件号一致
			</view>
		</view>
		<u-button class="u-m-t-30" type='primary' plain @click="submit" :loading='loading'>提交</u-button>
		<u-picker mode="selector" v-model="show" :range="selector" range-key='label' @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	import {
		updateIdno,
		getDictListByType
	} from '@/api/index.js'
	export default {
		data() {
			return {
				show: false,
				loading: false,
				selector: [],
				form: {
					type: '',
					idno: '',
					idtype: 0
				},
				rules: {
					type: [{
						required: true,
						message: '请选择证件类型',
					}],
					idno: [{
						required: true,
						message: '请输入证件号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
				}
			};
		},
		watch: {
			'form.type'(newValue, oldValue) {
				if(newValue == '身份证'){
					this.rules = {
						...this.rules,
						idno: [{
							required: true,
							message: '请输入证件号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.idCard(value);
							},
							message: '证件号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}],
					}
				}else{
					this.rules = {
						...this.rules,
						idno: [{
							required: true,
							message: '请输入证件号',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}],
					}
				}
				this.$refs.uForm.setRules(this.rules)
			}
		},
		onLoad() {
			this.getDictListByType()
		},
		methods: {
			getDictListByType(){
				getDictListByType({type:'IdType'}).then(res=>{
					this.selector = res
				})
			},
			confirm(e) {
				this.form = {
					...this.form,
					type: this.selector[e[0]].label,
					idtype:this.selector[e[0]].value
				}
			},
			select() {
				this.show = true
			},
			submit() {
				this.$u.debounce(
					this.$refs.uForm.validate(valid => {
						if (valid) {
							this.loading = true
							this.form.id = uni.getStorageSync('ownerId')
							updateIdno(this.form).then(res => {
								this.loading = false
								this.$u.toast('提交成功，等待审核')
								setTimeout(() => {
									this.$u.route({
										type: 'back'
									})
								}, 800)
							}).catch(err=>{
								this.loading=false
							})
						} else {
							console.log('验证失败');
						}
					})
				)
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style>
	page {
		background-color: #f1f1f1;
	}

	.box {
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding: 0 20rpx 20rpx;
	}
</style>
